<div id="main" class="main">
  <div class="tab">
    <ul id="tablabel">
      <li id="SafeNL" *ngIf="SafeNLName" (click)="change('SafeNL')">SafeNL
      </li>
    </ul>
    <ul id="CCSL" *ngIf="ccslsetList" class="dropDown"> 
      CCSL
      <li id="{{ccslset.id}}" *ngFor="let ccslset of ccslsetList" (click)="change(ccslset.id)">{{ccslset.id}}</li>
    </ul>
    <ul id="CG" *ngIf="CGs" class="dropDown"> 
      Clock Graph
      <li id="{{CG}}" *ngFor="let CG of CGs" (click)="changePng(CG)">{{CG}}</li>
    </ul>
    <ul id="CCG" *ngIf="CCGs" class="dropDown"> 
      Causality Clock Graph
      <li id="{{CCG}}" *ngFor="let CCG of CCGs" (click)="changePng(CCG)">{{CCG}}</li>
    </ul>
    <ul id="RCG" *ngIf="RCGs" class="dropDown"> 
      Reat-time  Clock Graph
      <li id="{{RCG}}" *ngFor="let RCG of RCGs" (click)="changePng(RCG)">{{RCG}}</li>
    </ul>
    <ul id="Circle" *ngIf="Circles" class="dropDown"> 
      circular dependency
      <li id="{{Circle}}" *ngFor="let Circle of Circles" (click)="changePng(Circle)">{{Circle}}</li>
    </ul>
    <ul id="RECCG" *ngIf="RECCGs" class="dropDown"> 
      extended CCG
      <li id="{{RECCG}}" *ngFor="let RECCG of RECCGs" (click)="changePng(RECCG)">{{RECCG}}</li>
    </ul>
    <!-- <details id="Circle" (click) = "DropDown('Circle')" *ngIf="Circles">
      <summary>Circle</summary>
      <ng-container *ngFor="let Cricle of Circles">
      <p class="p-tab"id = "{{Cricle}}" (click) = "change(Cricle)">{{Cricle}}</p >
      </ng-container>
    </details> -->
    <!-- <details id="RECCG" (click) = "RECCGTab()" *ngIf="RECCGList">
      <summary>RECCG</summary>
      <ng-container *ngFor="let RECCG of RECCGList">
      <p id = "{{RECCG.title}}" (click) = "change(RECCG.title)">{{RECCG.title}}</p >
      </ng-container>
    </details> -->
  </div>
  <div class="display">
    <app-ngx-editor></app-ngx-editor>
    <div id="{{ccslset.id}}-P" *ngFor="let ccslset of ccslsetList" style="display: none;">
      <p *ngFor="let ccsl of ccslset.ccslList">{{ccsl}}</p>
    </div>
    <div style="display: none;" *ngFor="let CG of CGs" id="{{CG}}-P">
      <img id="{{CG}}-Pag" (mousewheel)="resizeimg(CG,$event)">
    </div>
    <div style="display: none;" *ngFor="let CCG of CCGs" id="{{CCG}}-P">
      <img id="{{CCG}}-Pag" (mousewheel)="resizeimg(CCG,$event)">
    </div>
    <div style="display: none;" *ngFor="let RCG of RCGs" id="{{RCG}}-P">
      <img id="{{RCG}}-Pag" (mousewheel)="resizeimg(RCG,$event)">
    </div>
    <div style="display: none;" *ngFor="let Circle of Circles" id="{{Circle}}-P">
      <img id="{{Circle}}-Pag" (mousewheel)="resizeimg(Circle,$event)">
    </div>
    <div style="display: none;" *ngFor="let RECCG of RECCGs" id="{{RECCG}}-P">
      <img id="{{RECCG}}-Pag" (mousewheel)="resizeimg(RECCG,$event)">
    </div>
  </div>
</div>